<template>
    <div id="app">
      <h1>应用更新管理</h1>
      <form @submit.prevent="addUpdate">
        <input v-model="version" placeholder="版本号" required />
        <input v-model="url" placeholder="下载链接" required />
        <textarea v-model="description" placeholder="更新描述" required></textarea>
        <button type="submit">添加更新</button>
      </form>
      <ul>
        <li v-for="update in updates" :key="update._id">
          <strong>版本:</strong> {{ update.version }} <br />
          <strong>链接:</strong> <a :href="update.url" target="_blank">{{ update.url }}</a><br />
          <strong>描述:</strong> {{ update.description }} <br />
          <strong>日期:</strong> {{ new Date(update.createdAt).toLocaleString() }} <br />
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        version: '',
        url: '',
        description: '',
        updates: [],
      };
    },
    methods: {
      async addUpdate() {
        const response = await axios.post('http://localhost:5000/api/updates', {
          version: this.version,
          url: this.url,
          description: this.description,
        });
        this.updates.push(response.data);
        this.version = '';
        this.url = '';
        this.description = '';
      },
      async fetchUpdates() {
        const response = await axios.get('http://localhost:5000/api/updates');
        this.updates = response.data;
      },
    },
    mounted() {
      this.fetchUpdates();
    },
  };
  </script>
  
  <style>
  
  form {
    margin-bottom: 2em;
  }
  input, textarea {
    width: 100%;
    margin-bottom: 1em;
  }
  </style>